$recyclable-color = #2761C9
$harmful-color = #DD1717
$wet-color = #16937B
$dry-color = #FF8B00

.item
    .title 
        font-weight bold
        font-size 28rpx
        color #000
        position relative
        margin 30rpx 0
        background #eee
        padding 12rpx 30rpx
        &::after 
            content: ''
            position absolute
            right 30rpx
            top 50%
            width 18rpx
            height 18rpx
            border-top 3rpx solid #999
            border-right 3rpx solid #999
            transform translateY(-50%) rotate(45deg) 
            transition .3s transform
    .active::after
        transform translateY(-75%) rotate(135deg)
    .item-header
        display flex
        align-items center
        padding 30rpx 0
    .recyclable-img
        width 150rpx
        height 150rpx
        margin-right 18rpx
        border-radius 10rpx
    .desc
        font-size 26rpx
        &.recyclable
            color $recyclable-color
        &.harmful
            color $harmful-color
        &.wet
            color $wet-color
        &.dry
            color $dry-color
    .tip-header
        font-size 26rpx
        font-weight bold
        padding 12rpx 0
        padding-left 24rpx
        margin-bottom 30rpx
        color #fff
        &.recyclable
            background $recyclable-color
        &.harmful
            background $harmful-color
        &.wet
            background $wet-color
        &.dry
            background $dry-color
    .tip-item
        font-size 28rpx
        color #000
        margin-bottom 12rpx
        position relative
        padding-left 24rpx
        &.recyclable
            color $recyclable-color
        &.harmful
            color $harmful-color
        &.wet
            color $wet-color
        &.dry
            color $dry-color
    .garbage-list
        margin-top 30rpx
        .garbage-item
            // width 33%
            font-size 28rpx
            color #000
            // display inline-block
            // text-align center
            // margin-right 18rpx
            height 60rpx
            line-height 60rpx
            padding-left 24rpx
            // border-right 1rpx solid #999
            // border-bottom 1rpx solid #999
            // &.border-top
            //     border-top 1rpx solid #999
            // &::after 
            //     content: ''
            //     position absolute
            //     right 18rpx
            //     top 50%
            //     width 16rpx
            //     height 16rpx
            //     border-top 2rpx solid #999
            //     border-right 2rpx solid #999
            //     transform translateY(-50%) rotate(45deg) 
        View:nth-of-type(odd)
            background #eee
        View:nth-of-type(even)
            background #fff
    .kind-item
        font-size: 26rpx
        color #000
        margin-top 12rpx